<%= bootstrap_form_for(@user, url: admin_user_path(@user), remote: (params[:mode] != 'settings'), method: 'patch') do |f| %>

  <div class='text-center' id='user-info-image'>
    <%= avatar_image(@user, size=150) %>
    <% if params[:mode] == 'settings' %>
    <div>
      <div class="select-image text-center">
      <% if @user.provider.nil? %>
        <%= f.attachinary_file_field :avatar if cloudinary_enabled? %>
      <% end %>
      <%= f.file_field :profile_image, skip_label: true unless cloudinary_enabled? %>
      </div>
    </div>
    <% end %>
  </div>


  <div id="user-contact-info" class="user-info">
    <div class="user-section">
      <%= f.select(:role, roles_collection, prompt: t('select_role')) if current_user.is_admin? && params[:controller] != 'admin/settings' %>
      <%= f.email_field :email %>
      <%= f.text_field :name %>
      <%= f.text_field :company %>
      <%= f.text_field :street %>
      <%= f.text_field :city, inline: true %> <%= f.text_field :state, inline: true  %> <%= f.text_field :zip, inline: true  %>
      <%#= @topic.user.country.titleize unless @topic.user.country.nil? %>
      <%= f.select 'team_list', options_for_select(@all_teams.map {|t| [t, t.downcase]}, @user.team_list.map {|g| g.downcase}),
          { label: t(:assign_to, default: "Assign to group:") }, { class: "selectpicker", multiple: true } if teams? && current_user.is_admin? && @user.is_agent? && params[:controller] != 'admin/settings' %>
      <%= f.select(:priority, priority_collection) if current_user.is_admin? && params[:controller] != 'admin/settings' %>
      <%= f.check_box :active if current_user.is_admin? && params[:controller] != 'admin/settings' %>
      <%= f.time_zone_select :time_zone, nil, include_blank: true if current_user.is_admin? %>
    </div>
    <% if current_user.id == @user.id %>
    <div class="user-section">
      <div class="tiny-header"><%= t('devise.passwords.edit.change_your_password') %></div>
      <br/>
      <span class="password-fields">
        <%= f.password_field :password, autocomplete: "off" %>
        <%= f.password_field :password_confirmation, autocomplete: "off"  %>
      </span>
    </div>
    <% end %>
    <div class="user-section">
      <div class="tiny-header"><%= t(:contact_info, default: "Contact") %>:</div>
      <%= f.text_field :work_phone %>
      <%= f.text_field :cell_phone %>
    </div>
    <div class="user-section">
      <div class="tiny-header"><%= t(:social_info, default: "Social") %>:</div>
      <%= f.text_field :twitter %>
      <%= f.text_field :linkedin %>
    </div>
    <div class="user-section">
      <div class="tiny-header"><%= t(:signature, default: "Signature") %>:</div>
      <%= f.text_area :signature, data: { provider: 'summernote' }, skip_label: true, rows: 10 %>
    </div>
    <% if current_user.is_admin? && @user.is_agent? || @user == current_user %>
    <div class="user-section user-notifications">
      <div class="tiny-header"><%= t(:notifications, default: "Notifications") %>:</div>
      <%= f.check_box 'notify_on_private', { checked: @user.notify_on_private?, label: t('notify_on_private', default: "Email me when a private customer question has been received"), label_class: 'full-width', class: 'bs-toggle', data: { size: 'mini' } } %>
      <%= f.check_box 'notify_on_public', { checked: @user.notify_on_public?, label: t('notify_on_public', default: "Email me when a public customer question has been posted"), label_class: 'full-width', class: 'bs-toggle', data: { size: 'mini' } } %>
      <%= f.check_box 'notify_on_reply', { checked: @user.notify_on_reply?, label: t('notify_on_reply', default: "Email me when a new reply to a private discussion has been received"), label_class: 'full-width', class: 'bs-toggle', data: { size: 'mini' } } %>
    </div>
    <% end %>
    <ul class="list-inline">
      <li><%= f.submit "Save", class: 'btn btn-warning' %></li>
      <li></li>
      <li><%= link_to t(:scrub_user, default: 'Anonymize User'), admin_scrub_user_path(@user), remote: false,
                      method: :post,
                      data: { confirm: t(:anonymize_user_warning, default: "Are you sure you want to anonymize %{user_name}? This will permanently anonymize the user's personal data but retain all of their tickets and public posts.", user_name: @user.name) } if current_user.is_admin? && @user.can_scrub_and_delete? %></li>
      <li><%= link_to t(:delete_user, default: 'Delete User'), admin_user_path(@user), remote: false,
                      method: :delete,
                      data: { confirm: t(:delete_user_warning, default: "Are you sure you want to delete %{user_name}? This will permanently remove the user and all of their tickets, posts, replies and forum topics.", user_name: @user.name) } if current_user.is_admin? && @user.can_scrub_and_delete? %></li>
    </ul>
  </div>
<% end %>
<%= summernote_lang_js %>
<script type="text/javascript">
  $('.selectize').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
            }
        },
    // onItemAdd: function(value, $item) {
    //   char = $item.text().charAt(0);
    //   alert(char);
    //   //$item.parent().removeClass('selectize-input');
    //   $item.addClass('label');
    //   $item.addClass('label-doc-tagging');
    //   $item.addClass('label-' + char);
    // }
  });

    $('[data-provider="summernote"]').each(function(){
      $(this).summernote({
        lang: '<%= summernote_locale %>',
        height: 150,
        prettifyHtml: true,
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['misc', ['codeview']]
        ],
        codemirror: {
          theme: 'monokai',
          mode: "htmlmixed",
          tabsize: 2,
          smartIndent: true,
          lineNumbers: true,
          lineWrapping: true,
          tabMode: 'indent'
        },
        callbacks: {
          onImageUpload: function(files) {
            return Helpy.sendFile(files[0], $(this));
          },
          onMediaDelete: function(target, editor, editable) {
            var image_id;
            image_id = target[0].id;
            if (!!image_id) {
              Helpy.deleteFile(image_id);
            }
            return target.remove();
          }
        }

        // hint: {
        //   match: /:([\-+\w]+)$/,
        //   search: function (keyword, callback) {
        //     callback($.grep(emojis, function (item) {
        //       return item.indexOf(keyword)  === 0;
        //     }));
        //   },
        //   template: function (item) {
        //     var content = emojiUrls[item];
        //     return '<img src="' + content + '" width="20" /> :' + item + ':';
        //   },
        //   content: function (item) {
        //     var url = emojiUrls[item];
        //     if (url) {
        //       return $('<img />').attr('src', url).css('width', 20)[0];
        //     }
        //     return '';
        //   }
        // }
      });
    });
    $.ajax({
      url: 'https://api.github.com/emojis',
      async: false
    }).then(function(data) {
      window.emojis = Object.keys(data);
      window.emojiUrls = data;
    });
</script>

<script type="text/javascript">
  $('.selectize').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
            }
        }
  });
</script>
